<template>
	<a-checkbox-group v-model:value='value' :size='size' @change='onChange'>
		<a-checkbox :style="{width: width ?  width + 'px' : 'auto'}" v-for='(v,i) of ajax.data' :value='v[idStr]'>{{v[nameStr]}}</a-checkbox>
	</a-checkbox-group>
</template>

<script>
	import { ref, watch } from 'vue'
	import { Checkbox } from 'ant-design-vue'
	app.use(Checkbox)
	export default{
		props:{
			value 		: Array,
			name 		: String,
			label 		: String,
			form 		: Object,
			size		: String,
			data		: { type:Array, default: [] },
			api 		: String,
			idStr 		: { type: String, default: $config.idStr },
			nameStr 	: { type: String, default: $config.nameStr },
			cache 		: Boolean,
			width 		: Number
		},
		emits:{
			change: null,
			'update:value': null,
			init: null
		},
		setup(props, ctx){
			const ajax = ref({ data: props.data })
			$fn.ajax({ ajax, ctx, ...props })
			
			watch( () => props.data, data => ajax.value.data = data )
			
			return {
				onChange: (value, option) => {
					ctx.emit('update:value', value)
					ctx.emit('change', $fn.getFormFormat({...props, formType:'checkbox-group', data:ajax.value.data }) )
				},
				ajax
			}
		}
	}
</script>
<style>
	.ant-checkbox-wrapper + .ant-checkbox-wrapper{margin:0 0 5px;}
</style>